<template>
  <div class="bg-light-100 rounded">
    <el-container :style="{ height: h + 'px' }">
      <el-header class="imageHeader">
        <div class="mt-5">
          <el-button type="primary" size="small" @click="addClass"
            >新增图片分类</el-button
          >
          <el-button type="warning" size="small" @click="handleUpload">上传图片</el-button>
        </div>
      </el-header>
      <el-container>
        <ImageAside  ref="asideRef" @index="getActiveIndex"></ImageAside>
        <ImageMain ref="mainRef"></ImageMain>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import ImageAside from "@/layouts/component/ImageAside.vue";
import ImageMain from "@/layouts/component/ImageMain.vue";
import { onMounted, ref } from "vue";
const windowHeight = window.innerHeight || document.body.clientHeight;
let h = windowHeight - 60 - 40;
const asideRef = ref(null);
const image_class_id = ref(0);
const mainRef = ref(null);
function addClass() {
  console.log(asideRef.value);
  asideRef.value.createDrawer();
}
const getActiveIndex = (index) => {
  console.log(index);
  image_class_id.value = index;
  mainRef.value.getData(image_class_id.value);
  console.log(index);
  }

//上传图片
function handleUpload()
{
  mainRef.value.openUploadImage();
  
}


</script>

<style lang="less" scoped>
.imageHeader {
  border-bottom: solid 1px #999;
}
</style>